<template>
  <div class="homeBox" :style="{height:winHeight +'px'}">
    <div class="homeTitle">
      <img src="/static/image/indexTitle@2x.png" alt="">
    </div>
    <div class="jgBox">
      <h2 class="jgName">{{name}}</h2>
      <img src="/static/image/imgTitle@2x.png" class="imgtitle" alt="">
      <img :src="imageP" class="jgImg" alt="">
      <img src="/static/image/eqm.jpg" class="eqm" alt="">
      <span class="jgInfo"><b>{{name}}</b>的故事</span>
    </div>
    <a class="homeBtn" @click.stop="gotoThis">
      <img src="/static/image/indexBtn@2x.png" alt="">
    </a>
    <!-- <div class="indexInfo">
              <img src="/static/image/homeInfo@2x.png" alt="">
          </div> -->
  </div>
</template>

<script>
  import html2canvas from "../../static/js/html2canvas.min.js";
  import router from "../router/index";
  export default {
    name: "component_name",
    data() {
      return {
        winHeight: $(window).innerHeight(),
        name: this.$route.params.name,
        imgPath: "/static/image/",
        imageP: ""
      };
    },
    created() {
      let that = this;
      let jpegNum = parseInt(Math.random() * (13 - 1 + 1) + 1);
      that.imageP = that.imgPath + jpegNum + ".png";
      let widths = $(".jgBox").width();
      let heights = $(".jgBox").height();
      setTimeout(function() {
        html2canvas($(".jgBox"), {
          onrendered: function(canvas) {
            var image = canvas.toDataURL("image/png");
            var pHtml =
              "<img class='endImg' style='border-radius:0px;border:0px;' src=" +
              image +
              " />";
            // $("#html2canvas").html(pHtml);
            $(".jgBox").append(pHtml);
          }
        });
      }, 800)
    },
    methods: {
      gotoThis: function() {
        router.push({
          path: "/"
        });
      }
    }
  };
</script>

<style lang="css" scoped>

</style>